<template>
  <div>
    <el-dialog title="合同内容" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <!-- 
        属性：
    :src='' 文件路径
    :page='' 显示的页码
    :rotate 
     -->
      <hr />
      <div class="pdf" v-if="flag === false">
        <el-button @click="num--">上一页</el-button>
        <el-button @click="num++">下一页</el-button>
        <hr />
        {{ currentPage }} / {{ pageCount }}
        <el-button @click="print">打印合同</el-button>
        <pdf src="uni-shop_day3.pdf" ref="myPdf" @num-pages="pageCount = $event" @page-loaded="currentPage = $event" :page="num" style="display: inline-block; width: 400px"></pdf>
      </div>
      <!-- 写法二 -->
      <pdf v-else v-for="i in numPages" :key="i" :src="src" :page="i" style="display: inline-block; width: 25%"></pdf>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
// 获取pdf文件
const source = pdf.createLoadingTask('uni-shop_day3.pdf')
export default {
  name: 'SummerVuePdf',

  data() {
    return {
      dialogVisible: false,
      num: 1,
      //   du: 90
      currentPage: 0,
      pageCount: 0,
      numPages: undefined,
      src: source,
      flag: false
    }
  },

  mounted() {
    this.src.promise.then(pdf => {
      this.numPages = pdf.numPages
    })
  },

  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 打印合同
    print() {
      this.$refs.myPdf.print()
    }
  },
  components: {
    pdf
  }
}
</script>

<style lang="scss" scoped></style>
